<template>
  <ElUpload
    v-if="data.type === 'FILE'"
    style="width: 100%;"
    ref="upload"
    :file-list="fileList"
    :action="uploadUrl"
    :headers="headers"
    :limit="1"
    accept="video/*"
    :on-success="onSuccess"
    :on-remove="onRemove"
  >
    <template #trigger>
      <el-button type="primary">上传视频</el-button>
    </template>
  </ElUpload>
  <ElInput v-else v-model="data.url" />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElInput, ElButton, ElUpload } from 'element-plus'
const uploadUrl = import.meta.env.VITE_APP_API_BASE_URL + '/sys/file/upload'
const headers = { token: localStorage.getItem('token') }

interface Props {
  modelValue: string;
  data: any;
}
const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  data: () => ({})
})

interface Emits {
  'update:model-value': [string]
}
const emit = defineEmits<Readonly<Emits>>()

const data = computed(() => {
  return props.data
})

const fileList = computed(() => {
  if (!props.modelValue) return []
  return  [{
    url: props.modelValue,
    name: data.value.fileName
  }]
})

const onRemove = () => {
  emit('update:model-value', '')
  data.value.fileName = ''
}
const onSuccess = (response) => {
  const url = response.data?.url
  if (!url) return
  emit('update:model-value', url)
  data.value.fileName = response.data?.fileName
}

</script>
